import styles from './index.module.scss'
import cm from 'classnames'
import { useState } from 'react'
import { getCurrDataOfCalendar, currDayObj, isCurrDay } from './util'
import { binarySearch } from '@/utils/utils'

const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const currDay = currDayObj()
const currGroup = getCurrDataOfCalendar(currDay)

const Index = props => {
  const { onChange, onMonthChange, className, dateList } = props
  const [currDate, setCurrDate] = useState(currDay) //当前年月
  const [selectDay, setSelectDay] = useState(currDay) //当前选中日期
  const [dateGroup, setDateGroup] = useState(currGroup)
  //上一月
  const prevMonth = () => {
    const prevMonth = currDate.month - 1
    const prevParams = {
      year: prevMonth < 1 ? currDate.year - 1 : currDate.year,
      month: prevMonth < 1 ? 12 : prevMonth
    }
    onMonthChange?.(prevParams)
    setCurrDate(prevParams)
    setDateGroup(getCurrDataOfCalendar(prevParams))
  }
  //下一月
  const nextMonth = () => {
    const nextMonth = currDate.month + 1
    const nextParams = {
      year: nextMonth > 12 ? currDate.year + 1 : currDate.year,
      month: nextMonth > 12 ? 1 : nextMonth
    }
    onMonthChange?.(nextParams)
    setCurrDate(nextParams)
    setDateGroup(getCurrDataOfCalendar(nextParams))
  }

  //选择某一天
  const clickDate = (e, isDateActive) => {
    if (!isDateActive) {
      return
    }
    onChange?.(e)
    setCurrDate(e)
    setSelectDay(e)
    if (currDate.month != e.month || currDate.year != e.year) {
      setDateGroup(getCurrDataOfCalendar(e))
    }
  }

  return (
    <div className={cm(styles.calendar, className)}>
      <div className={styles.operationArea}>
        <div className={styles.iconBox} onClick={prevMonth}>
          <img loading="lazy" src="/images/back.png" alt="上一月" className={styles.icon} />
        </div>
        <div className={styles.time}>
          {currDate.year}年{currDate.month}月
        </div>
        <div className={styles.iconBox} onClick={nextMonth}>
          <img loading="lazy" src="/images/back.png" alt="下一月" className={cm(styles.icon, styles.iconRight)} />
        </div>
      </div>
      <div className={styles.weeks}>
        {weekArr.map((item, index) => {
          return (
            <div className={styles.weeksItem} key={index}>
              {item}
            </div>
          )
        })}
      </div>
      <div className={styles.dateBox}>
        {dateGroup.map((item, index) => {
          const isDateActive = binarySearch(dateList, item.date, 'reverse') !== -1
          return (
            <div
              className={cm(styles.dateItem, {
                [styles.dateItemActive]: isCurrDay(selectDay, item),
                [styles.dateItem]: true,
                [styles.isDateActive]: isDateActive
              })}
              key={index}
              onClick={() => clickDate(item, isDateActive)}
            >
              {item.day}
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default Index
